<template>
    <div style="paddingBottom: 1.33rem">
        <div id="phone_container">
            <input type="number" placeholder="请输入手机号" v-model="phone">
            <div id="phone_clear" v-show="phone"
                @click = "clear"></div>
            <div id="phone_location">{{location}}</div>
        </div>
        <div id="option_container" v-if="contentLoaded">
            <!-- 返还大唐积分 -->
            <h5>大唐消费积分奖励<span class="colored">{{score}}</span></h5>
            <p class="tip" style="margin-bottom: .2rem; margin-top: .2rem;">
                <span class="colored">注：所获得积分可到个人中心的账户积分进行提取。</span>
            </p>
			<!-- <input id="score_input"
			placeholder="请输入大唐账号…"
			v-model="datangNo"> -->
            <!-- type2流量红包 type3话费直充 -->
            <div v-if="type == 2 || type == 4">
                <h5>{{list.name}}<span class="colored">（销量: {{list.sales}}）</span></h5>
                <div class="grid-container">
                    <div class="grid"
					v-for="(goods,i) in list.content"
                    :key="i"
                    @click="clickGoods(goods)">
						<span class="grid-inner">
							<p class="ellipsis2">{{goods.title}}</p>
							<p class="ellipsis2 line2">￥{{goods.price}}元</p>
						</span>
					</div>
					<div class="fake-grid"></div>
					<div class="fake-grid"></div>
                </div>
            </div>
            <!-- type1共享流量 -->
            <div v-if="type == 1">
                <!-- 本月 -->
				<div v-if="list.content.thisMonth.length">
					<h5>本月共享流量<span class="colored">（销量: {{list.sales}}）</span></h5>
					<div class="grid-container">
						<div class="grid"
						v-for="goods in list.content.thisMonth"
						@click="clickGoods(goods)">
							<span class="grid-inner">
								<p class="ellipsis2">{{goods.title}}</p>
								<p class="ellipsis2 line2">￥{{goods.price}}元</p>
							</span>
						</div>
						<div class="fake-grid"></div>
						<div class="fake-grid"></div>
					</div>
				</div>
				<!-- 次月 -->
				<div v-if="list.content.nextMonth.length">
					<h5>次月共享流量<span class="colored">（销量: {{list.sale}}）</span></h5>
					<div class="grid-container">
						<div class="grid"
						v-for="goods in list.content.nextMonth"
						@click="clickGoods(goods)">
							<span class="grid-inner">
								<p class="ellipsis2">{{goods.title}}</p>
								<p class="ellipsis2 line2">￥{{goods.price}}元</p>
							</span>
						</div>
						<div class="fake-grid"></div>
						<div class="fake-grid"></div>
					</div>
				</div>
            </div>
            <!-- type4预存话费 -->
            <div v-if="type == 3">
                <h5>{{list.name}}<span class="colored">（销量: {{list.sales}}）</span></h5>
                <div id="type3_container">
					<div id="two_grid_nav">
						<span :class="{active: type3Active == 'duration1'}"
						@click="type3Active = 'duration1'">6个月充值</span>
						<span :class="{active: type3Active == 'duration2'}"
						@click="type3Active = 'duration2'">12个月充值</span>
					</div>
					<div class="long-grid-container">
						<div class="long-grid"
						v-for="goods in list.content[type3Active]"
						@click="clickGoods(goods)">
							<div class="inner">
								<div class="left">
									<div class="title ellipsis">{{goods.title}}</div>
									<div class="des">{{goods.description}}</div>
								</div>
								<div class="price">￥{{Math.round(goods.price)}}元</div>
							</div>
							<div class="sale" v-if="goods.on_sell == 1">惠</div>
						</div>
					</div>
				</div>
            </div>
            <p class="tip margin">{{list.tip}}</p>
        </div>
        <!-- 确认弹窗 -->
        <transition name="fade">
		<div class="pop-container" v-if="pop.show">
			<div class="pop"
			:style="pop.style">
				<div id="info_container">
					<p class="info">手机号码：{{phone}}</p>
					<p class="info">办理产品：{{list.name + activeGoods.title}}</p>
					<p class="info">价格：￥{{activeGoods.price}}元</p>
					<!-- <p class="info">大唐账号：{{datangNo}}</p> -->
					<p class="info">积分获得：{{activeGoods.point*activeGoods.price}}</p>
                </div>
                <p class="c-txt-s grey">请核对信息，错填漏填本平台不承担责任</p>
                <div class="btn-container">
                    <div class="c-btn"
                    @click="pop.show = false">取消</div>
                    <div class="c-btn highlight"
                    :class="{disabled: fetching}"
                    @click="buy">确定</div>
                </div>
			</div>
		</div>
	    </transition>
        <FooterNav></FooterNav>
    </div>
</template>
<script>
import { Indicator, MessageBox, Toast } from 'mint-ui'
import { mapGetters, mapActions } from 'vuex'
import FooterNav from '@/components/FooterNav'
export default {
    name: 'recharge',
    async created(){
        Indicator.open()
        this.type = this.$route.query.type
        await this.getGoods()
        Indicator.close()
        this.contentLoaded = true
    },
    data(){
        return {
            phone: '',
            datangNo: '',
            type: '',
            type3Active: 'duration1',
            selectedGoods: {},
            contentLoaded: false,
            fetching: false,
            activeGoods: '',
            pop: {
                show: false
            }
        }
    },
    computed:{
        ...mapGetters({
            allLists: 'recharge/goods',
            isPhoneValid: 'recharge/isPhoneValid',
            location: 'recharge/location',
        }),
        phoneValid(){
            return  /^1[34578]\d{9}$/.test(this.phone)
        },
        score(){
            if(this.type == 3) return this.type3Active === 'duration1' ? '100%' : '200%'
            return `${this.list.score}`
        },
        list() {
            console.log(this.allLists)
            return this.allLists[`type${this.type}`]
        }
    },
    methods:{
        ...mapActions({
            savePhone: 'recharge/savePhone',
            getGoods: 'recharge/getGoods',
            submitOrder: 'recharge/submitOrder',
            pay: 'recharge/pay',
        }),
        clear(){
            this.phone = ''
        },
        clickGoods(goods) {
            if(!this.phoneValid) {
                Toast('请输入正确的手机号码')
                return
            }
            if ((this.type == 1 || this.type == 2) && this.location !== '浙江移动' ) {
                Toast('该业务仅限浙江移动办理')
                return
            }
            this.activeGoods = goods
            this.pop.show = true
        },
        async buy(){
            if(this.fetching) return
            let temp
            this.fetching = true
            Indicator.open()
            const {data: orderInfo, success, msg} = await this.submitOrder({
                phone: this.phone,
                goodsId: this.activeGoods.id,
                datangNo: ''
            })
            Indicator.close()
            if(!success) {
                Toast(msg)
                this.fetching = false
            } else {
                this.pay({
                    orderId: orderInfo.order_id,
                    price: orderInfo.price,
                    successCb: () => {
                        this.$router.replace(`/order/paySuccess/id?type=4`)
                    },
                    failCb: () => {
                        Toast('购买失败')
                        this.pop.show = false
                    }
                })
                this.fetching = false
            }

        }
    },
    watch: {
        phone(val) {
            this.savePhone(val)
        },
        $route() {
           this.type = this.$route.query.type
        }
    },
    components: { FooterNav }
}
</script>
<style lang="less" scoped>
@baseColor: #fb4a4a;
#main_container{
		color: #333;
	}
	#phone_container{
		width: 100%;
		height: 2rem;
		padding: .4rem;
		border-bottom: 1px solid #969696;
		background: #fff;
		position: relative;
		input{
			font-size:0.6rem;
			margin-top: .2rem;
			letter-spacing:1.28px;
			float: left;
			width: 6.5rem;
			border:none;
		}
		.clear{
			width: 0.4rem;
			height: .4rem;
			border-radius: 100%;
			float: right;
			background: url() no-repeat 50%;
		}
		#phone_clear{
			.clear;
			margin-top: .45rem;
		}
		#phone_location{
			font-size: 0.4rem;
			float: right;
			margin-right: 0.09rem;
			margin-top: .4rem;
		}
		#phone_tip_container{
			position: absolute;
			top:2rem;
			left: 0;
			width: 100%;
			height: 10rem;
			.phone-tip{
				padding: .25rem .4rem;
				font-size: 0.37rem;
				color: #5C5C5C;
				border-bottom: 1px solid #969696;
				background: #fff;
				.remove{
					.clear;
					margin-top: .05rem;
					margin-left: .1rem;
				}
			}
		}
    }
    #option_container{
		padding: 0.3rem .4rem .67rem;
		h5{
			font-size: 0.37rem;
		}
		.tip{
			font-size:0.37rem;
			color:#969696;
			letter-spacing:0.56px;
			&.margin{
				margin-bottom: .5rem;
			}
		}
		.grid-container{
			margin-top: 0.5rem;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.grid{
				border: 2px solid #979797;
				border-radius:0.13rem;
				width:2.93rem;
				height:1.6rem;
				font-size: 0.35rem;
				display: flex;
				margin-bottom: 0.27rem;
				background: #fff;
				&.active{
					background:#ff891d;
					border-color: transparent;
					color: #fff;
				}
				&.hide{
					display: none;
				}
				&.colored{
					color: #ff891d;
					border-color: @baseColor;
				}
				.grid-inner{
					margin: auto;
					text-align: center;
					p{
						max-width: 2.7rem;
					}
					.line2{
						margin-top: .1rem;
					}
				}
			}
			.fake-grid{
				height: 0;
				width:2.93rem;
			}
		}
	}
	.long-grid-container{
		margin-top: .5rem;
		.long-grid{
			background: #FFFFFF;
			border: 2px solid #D3D3D3;
			border-radius: 0.13rem;
			margin-bottom: .2rem;
			padding: .2rem .3rem;
			position: relative;
			&.active{
				border-color: @baseColor;
			}
			.inner{
				overflow: hidden;
			}
			.left{
				float: left;
				.title{
					font-size: 0.38rem;
					color: #656565;
					letter-spacing: 0.72px;
					max-width: 4rem;
					margin-bottom: .15rem;
				}
				.des{
					font-size: 0.32rem;
					color: #9B9B9B;
					letter-spacing: -0.77px;
					width: 4.2rem;
					word-break: break-word;
					white-space: pre-wrap;
				}
			}
			.price{
				float: right;
				font-size: 0.4rem;
				/*color: @baseColor;*/
				margin-top: .25rem;
			}
			.sale{
				position: absolute;
				background: rgba(253, 165, 84, 0.83);
				width: 0.7rem;
				height: .7rem;
				border-radius: 100%;
				color: #fff;
				font-size: .38rem;
				text-align: center;
				line-height: .7rem;
				right: -.3rem;
				top: -.3rem;
			}
		}
	}
	#type3_container{
		width: 74%;
		margin: .5rem auto;
		#two_grid_nav{
			font-size: 0.36rem;
			text-align: center;
			overflow: hidden;
			span{
				display: inline-block;
				width: 50%;
				height: 1rem;
				line-height: 1rem;
				float: left;
				border: 2px solid @baseColor;
				color: @baseColor;
				background: #fff;
				&.active{
					color: #fff;
					background: @baseColor;
				}
			}
			span:first-of-type{
				border-radius: 0.13rem 0 0 .13rem;
			}
			span:nth-of-type(2){
				border-radius: 0 .13rem .13rem 0;
			}
		}
	}
	#score_input{
		border:1px solid #979797;
		border-radius:0.13rem;
		width: 100%;
		font-size: 0.38rem;
		padding: .2rem .3rem;
		margin: 0.47rem auto;
	}
	/*确认弹框*/
	#info_container{
		border-bottom: 1px solid #969696;
		text-align: left;
		padding: 0 .5rem;
		.info{
			font-size: 0.37rem;
			margin-bottom: .3rem;
        }
    }
    .btn-container{
        padding: .3rem 1rem 0;
        display: flex;
        justify-content: space-around;
    }
    .pop-container{
		position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    background: rgba(0, 0, 0, 0.2);
	    z-index: 100;
	    padding: .1px;
	    /*display:flex;*/
	    .pop{
	    	margin: 30% auto;
	    	width: 7rem;
	    	min-height: 50px;
	    	background: #fff;
	    	padding: .5rem .3rem;
            position: relative;
            border-radius: .2rem;
	    }
	}
</style>
